import React from 'react';
import { connect } from 'dva';
import { Modal, Form, Checkbox, message } from 'antd';

// @Form.create()
class WarningConfigModal extends React.Component {
  state = {
    visible: false,
  };
  componentWillMount() {}
  formRef = React.createRef();
  componentDidMount() {
    this.props.onRef(this);
  }
  showModal = async (record) => {
    await this.setState({
      visible: true,
    });
    this.setState({
      fenceId: record.fenceId,
    });
    this.formRef.current.setFieldsValue({
      warningConfig: record.warningConfigs,
    });
  };
  onCancel = () => {
    this.formRef.current.resetFields();
    this.setState({ visible: false });
  };
  handleOk = (e) => {
    const { dispatch } = this.props;
    e.preventDefault();
    this.formRef.current.validateFields().then((values) => {
      console.log(values);
      const params = {
        id: this.state.fenceId,
        warningConfig: values.warningConfig.join('_'),
      };
      console.log(params);
      dispatch({
        type: 'http/postDataWithRes',
        payload: {
          url: '/credit/vehicle/warn/pattern/set',
          ...params,
        },
        callback: (response) => {
          // if (response.statusCode === '0') {
          message.success('设置成功');
          this.setState({ visible: false });
          // } else {
          //   message.error(response.statusMessage, 3);
          // }
        },
      });
    });
  };
  saveFormRef = (form) => {
    this.form = form;
  };

  render() {
    // const { form: { getFieldDecorator } } = this.props;
    return (
      <Modal
        visible={this.state.visible}
        title="设置围栏预警方式"
        onOk={this.handleOk}
        onCancel={this.onCancel}
        width={600}
        okText="确认"
      >
        <Form onSubmit={this.handleSubmit} ref={this.formRef}>
          <Form.Item
            label="围栏预警方式"
            name="warningConfig"
            rules={[{ required: true, message: '请选择围栏预警方式' }]}
          >
            <Checkbox.Group
              options={[
                { label: '进入围栏', value: 1 },
                { label: '离开围栏', value: 2 },
                { label: '围栏内', value: 3 },
                { label: '围栏外', value: 4 },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default WarningConfigModal;
